<template>
  <div class="el-mr-materialrcecipt" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <TableTitle>
      <slot>
        <p>
          流程进度
        </p>
      </slot>
    </TableTitle>
    <div>
      <el-steps :active="active" finish-status="success" style="margin-top: 10px;" align-center>
        <el-step title="扫码移交" ></el-step>
        <el-step title="零件接收" ></el-step>
      </el-steps>
      <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
    </div>
    <TableTitle>
      <slot>
        <p>
          扫码操作
        </p>
      </slot>
    </TableTitle>
    <TopSearch ref="makeTmNull">
      <slot>
        <li>
          <el-button size="mini" type="primary" @click="scanning"
            >扫码移交</el-button
          >
        </li>
        <li>
          <el-select size="mini" v-model="sendType" placeholder="是否直配">
            <el-option label="直配" value="Y"></el-option>
            <el-option label="不直配" value="N"></el-option>
          </el-select>
          <span style="color:red;margin-left: 5px;">默认物料需要直配的话去其他界面操作，如果不直配要入库，请选择不直配</span>
        </li>

      </slot>
    </TopSearch>
    <div class="el-mr-mr-firstbg">
        <TableTitle>
        <slot>
          <p>
            已移交零件列表
          </p>
        </slot>
      </TableTitle>
      <TableOne></TableOne>
    </div>
    <MidSearch></MidSearch>
    <div class="el-mr-mr-secondbg">
      <TableTitle>
      <slot>
        <p>
          已接收零件列表
        </p>
      </slot>
    </TableTitle>
      <el-table
        ref="receiveTable"
        size="mini"
        :data="isScanList ? ScanListData : prSearchData"
        style="width: 100%"
        height="258"
        @selection-change="handleSelectionChange"
      >
      <!-- 可选择表 -->
      <el-table-column type="selection" width="40"> </el-table-column>
      <el-table-column type="index" label="序号" width="50"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="barcode" label="条码"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="isPaper" label="是否带证"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="requireShop" label="接收单位" :show-overflow-tooltip="true"> </el-table-column>

      <el-table-column prop="itemCode" label="零件图号" width="170" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="qualityCode" label="质量编号" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="substituteCode" label="限用架次" width="170" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="maxStorageDate" label="最长保管期" width="170" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="requireShop" label="需求单位" width="170" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="productCode" label="机型" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="startLotNo" label="起始架次"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="endLotNo" label="截止架次"  :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deliveryQty" label="数量" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="mdsUnit" label="计量单位" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="itemType" label="物料大类" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deliveryEmpCode" label="移交人" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="deliveryDate" label="移交时间" width="150" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="receiveRemark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
      <el-table-column prop="wmsDeliveryPlanId" width="150" label="交接单ID" :show-overflow-tooltip="true"> </el-table-column>
        <!-- <template slot-scope="scope" >
            <div :style="{color:scope.row.acceptType =='接收'? '#26A69A' : 'red'}">
              {{scope.row.acceptType}}
            </div>
        </template> -->
      
      </el-table>
      <!-- 分页 -->
      <el-pagination
      layout="prev, pager, next"
      :total="totalCount2"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNumber"
      :page-sizes="[10,20,50,100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount2">
      </el-pagination> -->
    </div>

    
  </div>
</template>
<script>
import TopSearch from "../../../../components/TopSearch.vue";
import MidSearch from "./components/MidSearch.vue"
import TableOne from "./components/PrTables.vue";
import { mrMhAll,partReceiveTm } from "@/utils/api.js"
import TableTitle from "../../../../components/TableTitle.vue"

export default {
  name: "PartReceive",
  components: {
    TopSearch,
    TableOne,
    MidSearch,
    TableTitle
  },
  data() {
    return {
      // input
      tiaoma: "",
      // 当前页数
      pageNumber: 1,
      pageNumber2: 1,
      // 数据总个数
      totalCount: 0,
      totalCount2: 0,
      // 返回的数据数组
      resData2: [],
      // 每页数据个数
      pageSize: 200,
      // 确认列表高亮参数
      // stableIndex: 0,
      // 接收上表传来的数据表
      partReceiveList:[],
      // 判断是否是零件扫码移下来的数据
      isScanList:true,
      // 存储已经扫码的数据表
      ScanListData:[],
      // 接收条件查询（midSearch中）传过来的data
      prSearchData:[],
      // 下表勾选的数据表
      selectList:[],
      sss:[],
      // 操作码两次确认
      isConfirm:false,
      // 进度条参数
      active:0,
      // 是否扫码移交
      isScanYj:false,
      loading:false,
      //是否直配
      sendType:"Y"
    };
  },
  methods: {
    next() {
        if (this.active++ > 0){
          setTimeout(()=>{
            this.active = 0
          },1000)
        }
        console.log(this.active)
      },
    scanning(){
        if(this.tiaoma == 9005){
          if(this.ScanListData != []){
            if(this.isConfirm){
              this.loading=true;
              this.$bus.$emit('mrPrtSmReceive','零件接收')
              this.isConfirm = false
            }else{
              this.isConfirm = true
            }
          }else{
            this.$Alert({
              title: "失败",
              message: '请输入正确操作码',
              type: "error",
            })
          }
        }else{
          //yebo 判断是否重复扫码
          for(var i=0;i<this.ScanListData.length;i++){
            if(this.ScanListData[i].barcode == this.tiaoma){
              this.$Alert({title: "失败",message: '请误重复扫码',type: "error"});
              return ;
            }
          }
          this.$options.methods.topToLastScan.bind(this)()
        }
      
    },
    // Table勾选函数
    handleSelectionChange(val){
      this.selectList = val
      console.log(123123,val)
      // 将下表选中的数据传给midSearch
      this.$bus.$emit('prSelectList',this.selectList)
      // this.selectList = []
    },
    // 零件接收扫码移交 
    topToLastScan(){
      partReceiveTm({
        barcode:this.tiaoma,
        sendType:this.sendType,
        pageParameter:{
          page:this.pageNumber ,
          rows:this.pageSize
        }
      }).then((res)=>{
        console.log('零件扫码移交',res)
        if(res.data.retCode == 200){
          //进度条函数
          this.$options.methods.next.bind(this)()
          // 是否扫码移交
          this.isScanYj = true
          this.sss = res.data.responseBody.result
          for(let i=0;i<this.sss.length;i++){
            this.ScanListData.push(this.sss[i]);
          }
          this.$Alert({title: "成功",message: res.data.message,type: "success"})
          // 清空input并聚焦
          this.$refs.makeTmNull.makeTmNull()
          this.$refs.makeTmNull.openScan()
        }else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          })
        }
      });
      
    },
    // 下表分页
    handleCurrentChange(val) {
      this.pageNumber = val;
      console.log(val)
    },
    // 选择每页条数后请求接口更新表格
    handleSizeChange(val) {
      this.pageSize = val
    },
  },
  mounted() {
      // 接收完成 调用进度条函数
      this.$bus.$on('partReceJdtSuccess',(e)=>{
        this.$options.methods.next.bind(this)()
        // 接收完成将是否扫码参数还原
        this.isScanYj = false
      })
      // 接收TopSearch的条码
      this.$bus.$on('saoma',(e)=>{
        this.tiaoma = e
        // console.log('条码',e)
      })
      this.$bus.$on('cancalMask',(e)=>{
        this.loading = false
        // console.log('条码',e)
      })
      
      // 接收待扫码的数据
      this.$bus.$on('partReceiveTopTable',(e)=>{
        this.partReceiveList = e
      })
      // 接收条件查询（midSearch中）传过来的data
      this.$bus.$on('preceSearchData',(e)=>{
        // 将Table数据从已经扫码Data切换为接收查询的Data
        this.isScanList = false
        this.prSearchData = e
      })
      // 接收点击接收后所接收的数据的条码，然后进行删除
      this.$bus.$on('prDeleteTiaoma',(e)=>{
        console.log(e)
        for(let i=0;i<e.length;i++){
          for(let j=0;j<this.ScanListData.length;j++){
            if(e[i] == this.ScanListData[j].barcode){
              // this.$nextTick(function(){
              //   this.ScanListData.splice(j,1)
              //   console.log(this.ScanListData)
              // })
              this.ScanListData.splice(j,1)
              console.log(this.ScanListData)
            }
          }
        }
        console.log(this.ScanListData,111)
      })
      // 接收按钮假传--- 清空条码框 聚焦
      this.$bus.$on('rePartTmNull',(e)=>{
        this.$refs.makeTmNull.makeTmNull()
        this.$refs.makeTmNull.openScan()
      })
      // 撤销后刷新下表
      this.$bus.$on('mrPrCxData',(e)=>{
          this.ScanListData = e
      })
  },
  watch:{
    'ScanListData':{
            immediate:true,
            deep:true,
            handler:function (val) {
                this.$nextTick(()=>{
                  this.isScanList = true
                  for(let k=0;k<this.ScanListData.length;k++){
                    this.$refs.receiveTable.toggleRowSelection(this.ScanListData[k],true);
                  }
                })
            }
        }
  }
};
</script>
<style scoped>
.el-pagination {
  text-align: center;
}
.el-table /deep/ .highlight-row {
  background: rgb(248, 165, 117);
}
.el-mr-mr-secondbg {
  overflow: hidden;
}
</style>